<script setup lang="ts">
import { defineEmits } from "vue";
import { explainArr } from "../info/exolainJson";
let $emit = defineEmits(["submitClick", "closeClick"]);
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});
import { useRouter } from "vue-router";
const router = useRouter();
const columns = [
  {
    label: "项目名称",
    prop: "title",
    width: "100px"
  },
  {
    label: "项目编号",
    prop: "contont",
    slot: "content"
  }
];
import tableList from "./tableList.vue";
</script>

<template>
  <div class="pl-[10px] headerTitle"><span></span>基本信息</div>
  <div class="p-[20px] pt-0">
    <el-descriptions title="" :column="2" border>
      <el-descriptions-item label="项目名称" width="150"
        >杭州青青草公益服务中心
      </el-descriptions-item>
      <el-descriptions-item label="项目编号" width="150"
        >DSFKJSLFDKJAD;FJA</el-descriptions-item
      >
      <el-descriptions-item label="发起单位类型" width="150"
        >民政</el-descriptions-item
      >
      <el-descriptions-item label="资助方名称" width="150"
        >XXXX民政局</el-descriptions-item
      >
      <el-descriptions-item label="所属地区" width="150"
        >浙江省-杭州市</el-descriptions-item
      >
      <el-descriptions-item label="项目周期" width="150"
        >2022-01-01至2022-11-12</el-descriptions-item
      >
      <el-descriptions-item label="联系人" width="150"
        >孙小小</el-descriptions-item
      >
      <el-descriptions-item label="联系电话" width="150"
        >139XXXXXXXX</el-descriptions-item
      >
      <el-descriptions-item label="标签" :span="2" width="150"
        >亚运 公益创投 ……</el-descriptions-item
      >
      <el-descriptions-item label="项目概述" :span="2" width="150"
        >各区、县（市）民政局，钱塘区、西湖风景名胜区社发局，各有关社会组织：
        为培育发展社会组织，充分引导社会组织在助力经济发展、推进乡村振兴、促进稳岗就业、提供“一老一小”服务、参与第三次分配等工作中发挥积极作用，根据《民政部关于民政部门利用福利彩票公益金向社会力量购买服务的指导意见》《浙江省关于促进社会组织高质量发展 助力共同富裕示范区建设的意见》《杭州市关于促进公益性社会组织发展的实施意见》和《杭州市公益创投项目管理办法》等文件要求，现就做好杭州青青草公益服务中心
        申报工作通知如下：</el-descriptions-item
      >
      <el-descriptions-item label="封面图" :span="2" width="150">
        <el-image
          style="width: 100px; height: 100px"
          src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :initial-index="4"
          fit="cover"
        />
      </el-descriptions-item>
      <el-descriptions-item label="轮播图" :span="2" width="150"
        ><el-image
          style="width: 100px; height: 100px; margin-right: 10px"
          src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :initial-index="4"
          fit="cover" /><el-image
          style="width: 100px; height: 100px; margin-right: 10px"
          src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :initial-index="4"
          fit="cover" /><el-image
          style="width: 100px; height: 100px"
          src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :initial-index="4"
          fit="cover"
      /></el-descriptions-item>
    </el-descriptions>
  </div>
  <div class="pl-[10px] headerTitle"><span></span> 项目详情</div>
  <pure-table
    class="mt-[20px]"
    :data="explainArr"
    :columns="columns"
    stripe
    border
    :header-cell-style="{
      textAlign: 'center',
      background: '#f5f7fa'
    }"
  >
    <template #content="{ row }">
      <div class="whitespace-break-spaces">{{ row.contont }}</div>
    </template>
  </pure-table>

  <tableList />

  <div class="h-[40px]"></div>
  <div
    v-if="!props.show"
    class="flex justify-center m-[10px] w-full p-[20px] bg-white shadow shadow-zinc-200 -left-[10px] relative"
  >
    <el-button @click="$emit('closeClick')">取消</el-button>
    <el-button @click="$emit('closeClick')">保存草稿</el-button>
    <el-button type="primary" @click="$emit('submitClick', 2)"
      >上一步</el-button
    >
    <el-button type="primary" @click="$emit('submitClick', 4)">确认</el-button>
  </div>
</template>

<style lang="scss" scoped>
.headerTitle {
  content: " ";
  position: relative;
  border-bottom: 1px solid #eee;
  line-height: 48px;
  span {
    width: 4px;
    height: 15px;
    background: #409eff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
  }
}
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>
